<template>
  <el-card :bordered="false">
    <el-row :gutter="8">
      <el-col :span="5">
        <el-input class="mb20" clearable v-model="name" @input="handleInput" placeholder="请输入字典名称" />
        <x-tree ref="xTree" :treeData="treeData" @changeTree="handleChangeTree" />
      </el-col>
      <el-col :span="19">
        <div class="ofh mb10">
          <span>
            当前上级字典名称：
            <span>{{selectObj.parentId ? selectObj.parentName : null }}</span>
          </span>
          <el-tooltip class="item" content="新增字典" effect="dark" placement="top">
            <el-button
              size="small"
              class="fr"
              type="primary"
              icon="el-icon-plus"
              @click="handleAdd"
            />
          </el-tooltip>
        </div>
        <dic-table
          @setTree="handleSetTree"
          @refresh="handleRefresh"
          ref="dicTable"
          @edit="handleEdit"
        />
      </el-col>
    </el-row>
    <dic-modal ref="dicModal" @refresh="handleRefresh" />
  </el-card>
</template>

<script>
import DicTable from './DicTable'
import DicModal from './DicModal'
import XTree from '@/components/XTree'
import { getSession, setSession } from '@/utils/util'
import { getDicTree } from '@/api/dictionary'

export default {
  components: {
    DicModal,
    DicTable,
    XTree
  },
  data() {
    return {
      selectObj: {},
      treeData: [],
      saveTreeData: [],
      name: null
    }
  },
  mounted() {
    let data = this.$ls.get('dictionaryData')
    let arr = [
      {
        title: '顶层字典',
        key: '',
        value: '',
        children: data
      }
    ]
    this.saveTreeData = [...data]

    this.treeData = [...arr]
  },
  methods: {
    handleInput(e) {
      console.log('e', e)
      let arr = []
      if (e) {
        arr = this.treeData[0].children.filter(v => v.title.indexOf(e) != -1)
      } else {
        arr = [...this.saveTreeData]
      }
      this.treeData = [
        {
          title: '顶层字典',
          key: '',
          value: '',
          children: arr
        }
      ]
    },
    handleSetTree(row) {
      this.$refs.xTree.getKeys([row.parentId])
      this.handleChangeTree(row)
    },
    getDicTree() {
      getDicTree('', {}).then(res => {
        console.log('app tree res', res)
        if (res.state === '000000' && res.data.length > 0) {
          setSession('dictionaryData', res.data)
          let arr = [
            {
              title: '顶层字典',
              key: '',
              value: '',
              children: res.data
            }
          ]
          this.treeData = [...arr]
          this.saveTreeData = [...res.data]
        }
      })
    },
    handleRefresh() {
      this.$refs.dicTable.handleGetList()
      this.getDicTree()
    },
    handleAdd() {
      if (this.selectObj.parentId) {
        this.$refs.dicModal.edit(false, this.selectObj)
      } else {
        this.$refs.dicModal.edit(false, {})
      }
    },
    handleEdit(record) {
      if (this.selectObj.parentId !== '') {
        this.$refs.dicModal.edit(true, { ...record, ...this.selectObj })
      } else {
        this.$refs.dicModal.edit(true, record)
      }
    },
    handleChangeTree(obj) {
      this.selectObj = obj
      this.$refs.dicTable.getId(obj)
    }
  }
}
</script>

